<template>
	<view class="warp">
		<view class="main">
			<image :src="qr"></canvas>
			
			
		</view>
		<view class="title">
			{{user_name}}
		</view>
		<view class="desc">
			<text>
				1、通过本二维码进入的用户归属您的名下；
				2、您推广进来的用户消费后将获得10%收益;
			</text>
		</view>
		
		<button  @click="saveImageToAlbum">保存到相册</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: [],
				img: '',
				qr: '',
				local_qr:'',
				user_name:''
			};
		},
		
		onLoad() {
			
		},
		async onReady() {
			await this.getUserInfo();

			await this.CreateShareQR();
		},
		methods: {
			async getUserInfo() {
				let u = uni.getStorageSync('user');
				console.log(u.UserID);
				let res = await this.$api.post('User/GetUserInfo', {
					ID: u.UserID
				});

				this.user = res.data;
				
				this.img = this.user.UserImgs;
				this.user_name=this.user.Name;
				
			},

			async CreateShareQR() {
				let res = await this.$api.post('Member/CreateShareQR');

				this.qr = res.data;
				
			},


			saveImageToAlbum: function() {
				var that = this;
				//将图片保存到相册
				
				let local_qr = wx.getImageInfo({
					src: this.qr,
					success: function(res) {
						console.log(res);
						
						that.local_qr=res.path;
					},
					fail: (res) => {
						console.log(res);
					}
				});
				
				wx.saveImageToPhotosAlbum({
					filePath: this.local_qr,
					success(res) {
						wx.showModal({
							title: '保存成功',
							content: '专属二维码保存到相册了，快去分享给朋友吧',
							showCancel: false,
							confirmText: '好的',
							confirmColor: '#818FFB',
							success: function(res) {
								if (res.confirm) {}
								// that.hideShareImg()
							},
						});
					},
				});
			},
		},
	};
</script>

<style lang="scss">
	.warp {
		width: 100%;
		box-sizing: border-box;
		
		.main{
			padding-top: 200rpx;
			text-align: center;
			
			image{
				width:400rpx;
				height:400rpx;
			}
		}
		.title{
			text-align: center;
			padding-top: 30rpx;
			font-size: 42rpx;
			color:#fff;
		}
		
		.desc{
			font-size:28rpx;
			color:#dedede;
			padding:90rpx;
		}
		
		
	}
	
	

	button {
		position: fixed;
		left: 50%;
		bottom: 80rpx;
		transform: translate(-50%, -50%);
		background-color: #f0b82b;
		color: #fff;
		border-radius: 16rpx;
		width: 90vw;
		margin: 0 auto;
	}
</style>